<template>
	<span>
		<a
			v-if="to"
			:href="linkUrl"
			:target="target"
			:class="linkClasses"
			@click.exact="handleCheckClick($event, false)"
			@click.ctrl="handleCheckClick($event, true)"
			@click.meta="handleCheckClick($event, true)"
		>
			<slot></slot>
		</a>
		<span v-else :class="linkClasses">
			<slot></slot>
		</span>
		<span :class="separatorClasses" v-html="separator" v-if="!showSeparator"></span>
		<span :class="separatorClasses" v-else>
			<slot name="separator"></slot>
		</span>
	</span>
</template>

<script lang="ts">
	import Anes from "../base";
	import { Prop, Component } from "vue-property-decorator";
	@Component
	export default class BreadCrumbItem extends Anes {
		@Prop({ default: "" }) separator!: string;
		@Prop({ default: false }) showSeparator!: boolean;

		prefixCls = "ivu-breadcrumb-item";
		mounted() {
			this.$options.name = "BreadCrumbItem";
			this.showSeparator = this.$slots.separator !== undefined;
		}
		get linkClasses() {
			return `${this.prefixCls}-link`;
		}
		get separatorClasses() {
			return `${this.prefixCls}-separator`;
		}
	}
</script>